﻿<!DOCTYPE html>
<html>
<head>
    <title>rift</title>
    <meta charset="utf-8"/>
    <link type="text/css" rel="stylesheet" href="css/common.css">
    <link type="text/css" rel="stylesheet" href="css/subnav.css">
    <link type="text/css" rel="stylesheet" href="css/rift.css">
</head>
<body>
<div class="wrapped">
    <script src="js/header.js"></script>
    <script src="js/subnav.js"></script>
    <div class="container">
        <div class="content" id="content">
            <img class="rift_h1_desktop" src="img/rift_h1_desktop.png" alt="rift"/>
            <h3>新一代VR虚拟现实</h3>
            <div>
                <a href="#"><span id="buy1" class="order_now">马上订购</span></a>
            </div>
        </div>
    </div>
    <div class="image_hero"></div>
    <div class="image_travel-bg">
        <div id="step_into_r">
            <h2>走进 Rift</h2>

            <p>Rift是不同于任何你曾经有的体验。无论你是走进你最喜欢的游戏,看一个身临其境的虚拟现实电影,跳在世界另一端的一个目的地,或只是花时间与朋友在虚拟现实中,你会觉得你真的在那里。</p>
        </div>
    </div>
    <div class="content_seeing">
        <div class="s_content">
            <h2 id="s_h2">眼见为实</h2>

            <p id="s_p">Rift专门为虚拟现实使用最先进的显示和光学。高刷新率和低持久性显示与定制的光学系统一起工作,提供令人难以置信的视觉保真度和一个身临其境,广阔的视野。</p>

            <div class="image_display_bg"></div>
        </div>
    </div>
    <!--seeing is belive-->
    <div class="content_magic">
        <img class="image_bg-left" id="bgLeft" src="img/science-fiction-left.jpg" alt="">

        <div class="content_text">
            <h2 id="m_h2">神奇的存在</h2>

            <p id="m_p">Rift的先进显示技术结合其精确、低延迟跟踪系统使你有一种身临其境的感觉。它神奇的改变了一切。你将从未有过像这样的浸入式体验。</p>
        </div>
    </div>
    <!--神奇的存在-->
    <div class="content_flash_1">
        <h4 id="flash1_h4">特色内容</h4>

        <h2 id="flash1_h2">EVE: Valkyrie</h2>

        <div id="flash1_button" class="play_button" onclick="openFlash_1()"><img src="img/96_sprite.png" alt="">
        </div>
    </div>
    <div id="flash_1" class="objectCarousel">
        <div class="close_button" onclick="closeFlash()"></div>
        <!--<iframe class="flash_iframe"-->
                <!--src="http://www.tudou.com/programs/view/html5embed.action?type=0&code=dvAIJ6VHHK4&lcode=&resourceId=0_06_05_99"-->
                <!--allowtransparency="true" allowfullscreen="true" allowfullscreenInteractive="true" scrolling="no"-->
                <!--border="0" frameborder="0"></iframe>-->
    </div>
    <div class="content_flash_2">
        <h4 id="flash2_h4">所有Rift均包含</h4>

        <h2 id="flash2_h2">Lucky's Tale</h2>

        <div id="flash2_button" class="play_button" onclick="openFlash_2()"><img src="img/96_sprite.png" alt="">
        </div>
    </div>
    <div id="flash_2" class="objectCarousel">
        <div class="close_button" onclick="closeFlash()"></div>
        <!--<iframe class="flash_iframe"-->
                <!--src="http://www.tudou.com/programs/view/html5embed.action?type=0&code=dvAIJ6VHHK4&lcode=&resourceId=0_06_05_99"-->
                <!--allowtransparency="true" allowfullscreen="true" allowfullscreenInteractive="true" scrolling="no"-->
                <!--border="0" frameborder="0"></iframe>-->
    </div>
    <div class="content_features">
        <div class="content_design">
            <h2 id="design_h2">高级和精致的设计</h2>

            <p id="design_p">从你拿起Rift的那一刻起,你就会感受到它在设计和施工方面对细节的关注。另外Rift还是可定制的、舒适的、适应性强和美丽的,Rift的技术和设计必将带给您非凡的体验。</p>
        </div>
    </div>

    <div class="content_thumbs">
        <div class="objectCarousel" id="objectCarousel">
            <div class="close_button" onclick="closeCarousel()"></div>
            <div class="objectCarousel_border">
                <div class="objectCarousel_image">
                    <div class="bg_left" id="bg_left" onclick="moveLeft()"></div>
                    <div class="bg_right" id="bg_right" onclick="moveRight()"></div>
                    <img class="image1" id="obj1" src="img/features-oculus-remote.jpg"
                         style="width: 981px;height: 494px">
                    <img class="image2" id="obj2" src="img/features-2.jpg" style="width: 981px;height: 494px">
                    <img class="image3" id="obj3" src="img/features-xbox-controller.jpg"
                         style="width: 981px;height: 494px">
                </div>
                <div class="border_title">
                    <div class="p_border0" id="p_border0">远程直观的探索</div>
                    <div class="p_border1" id="p_border1">集成虚拟现实音频</div>
                    <div class="p_border2" id="p_border2">好游戏需要好手柄</div>
                </div>
            </div>
        </div>
        <!--轮播-->
    <span id="photo1" onclick="playCarousel_1()" class="photo"
          style="background-image:url('img/features-oculus-remote.jpg')">
        <div class="photo_rotate1"></div>
        <p class="photo_p">远程直观的探索</p>
    </span>
    <span id="photo2" onclick="playCarousel_2()" class="photo" style="background-image:url('img/features-2.jpg')">
        <div class="photo_rotate1"></div>
        <p class="photo_p">集成虚拟现实音频</p>
    </span>
    <span id="photo3" onclick="playCarousel_3()" class="photo" style="background-image:url('img/features-3.jpg')">
        <div class="photo_rotate1"></div>
        <p class="photo_p">为VR设计的传感器</p>
    </span>
    <span id="photo4" onclick="playCarousel_4()" class="photo"
          style="background-image:url('img/features-xbox-controller.jpg')">
        <div class="photo_rotate1"></div>
        <p class="photo_p">好游戏需要好手柄</p>
    </span>
    </div>
    <div class="content_oculusTouch" style="background-image:url('img/touch-learn-more.jpg')">
        <div class="content_oculusTouch_text">
            <h2 id="touch_h2">提高游戏与眼睛的接触</h2>

            <p id="touch_p">跟踪控制器带你的手进入虚拟现实,让你获得另一个水平的体验。</p>

            <div>
                <a href="touch.html" class="learn_more"><span>了解更多</span></a>
            </div>
        </div>
    </div>
    <div class="content_oculusCommunity" style="background-image:url('img/connected-bg1.jpg')">
        <div class="content_oculusCommunity_text">
            <h2 id="community_h2">玩家社区</h2>

            <p id="community_p">加入Rift社区的用户来自世界各地，并且数量日益增长。在各种各样的虚拟现实游戏中玩合作或者测试你的竞争优势,体验和发现新的朋友。</p>

            <div>
                <a href="#" class="join_community"><span>进入社区</span></a>
            </div>
        </div>
    </div>
    <div id="flash_3" class="objectCarousel">
        <div class="close_button" onclick="closeFlash()"></div>
        <!--<iframe class="flash_iframe"-->
                <!--src="http://www.tudou.com/programs/view/html5embed.action?type=0&code=dvAIJ6VHHK4&lcode=&resourceId=0_06_05_99"-->
                <!--allowtransparency="true" allowfullscreen="true" allowfullscreenInteractive="true" scrolling="no"-->
                <!--border="0" frameborder="0"></iframe>-->
    </div>
    <div class="content_section">
        <div class="content_section_order">
            <div>
                <h2 id="section_h2">心动不如行动</h2>

                <p id="section_p">Rift的每一个订单包括一个耳机,传感器,电缆,Xbox控制器,和Lucky’s Tale。</p>

                <div class="content_button_order">
                    <a href="#" class="order_now"><span>马上订购</span></a>
                </div>
                <div class="image_luck_tale" onclick="openFlash_3()">
                    <img src="img/app-bundle-tile-luckys.jpg" alt="">

                    <div class="luck_play_button">

                    </div>
                    <h4>观看视频</h4>
                </div>
            </div>
        </div>
        <img class="rift-family-photo" src="img/family.png"/>
    </div>
    <script src="js/footer.js"></script>
</div>
<script type="text/javascript" src="./js/rift.js"></script>
</body>
</html>